<script setup lang="ts">
import { reactive ,ref,onMounted,onBeforeMount, nextTick} from "vue";
import router from "@/router";
import { ThematicStore } from "@/stores/BackData/Thematic/Thematic";
import {updatetheThematic,addisShelvesThematic,deltheThematic, getPartThematic } from "@/api/teacher/hu/thematic";
const store= ThematicStore();
const toreturn = () => {
    router.push({path:'/Thematic'})
}
const dialogTableVisible = ref(false)
const classVisiable = ref(false)
const testVisiable = ref(false)
const updateVisiable= ref(false)
const delVisiable = ref(false)
const addVisiable = ref(false)
const formLabelWidth = '80px'

// const updatethematicname = ref("")
// const updatethematicdesc = ref("")
// const updateCateid = ref("")
// const updateImg= ref("")
// onMounted(() => {

const updatethematicname = ref(store.nowdatilthematicInfo[0].thematicName)
const updatethematicdesc = ref(store.nowdatilthematicInfo[0].thematicDescription)
const updateCateid = ref(store.nowdatilthematicInfo[0].categoryId)
const updateImg= ref(store.nowdatilthematicInfo[0].thematicImg)
// });

const fupdateVisiable = () => {
  console.log(3333);
  
  updateVisiable.value=false
 console.log(updatethematicname.value);
  // console.log();
  // console.log();
  // console.log();
  updatetheThematic(store.nowthematicInfo[0].id,updatethematicname.value,updatethematicdesc.value,updateCateid.value,updateImg.value)

}
const fdelVisiable = () => {
  console.log('2222');
  console.log(store.nowthematicInfo[0].id);
  deltheThematic(store.nowthematicInfo[0].id)
  
  router.push({path:'/Thematic'})
  // console.log(!store.nowthematicInfo[0].isShelves);
  // if(!store.nowthematicInfo[0].isShelves){
  //   addisShelvesThematic(store.nowthematicInfo[0].id,1)
  // }
  // else{
  //   addisShelvesThematic(store.nowthematicInfo[0].id,0)
  // }
  
  delVisiable.value = false
}
const faddVisiable = () => {
  console.log('1111');
  console.log(store.nowthematicInfo[0].id);
  console.log(!store.nowthematicInfo[0].isShelves);
  if(!store.nowthematicInfo[0].isShelves){
    addisShelvesThematic(store.nowthematicInfo[0].id,1)
  }
  else{
    addisShelvesThematic(store.nowthematicInfo[0].id,0)
  }
  
  addVisiable.value = false
}

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})



</script>

<template>
  <div
    style="
      background-color: rgb(233, 233, 233);
      width: 1150px;
      height: 900px;
      padding: 0;
    "
  >
    <div style="border: 1px solid white; height: 40px; background-color: white">
      <el-breadcrumb separator="|" style="line-height: 40px; font-size: 15px">
        <el-breadcrumb-item :to="{ path: '/Thematic' }"
          >返回</el-breadcrumb-item
        >
        <el-breadcrumb-item>专题详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div style="background-color: white; height: 270px; margin-top: 10px">
      <div
        style="
          outline: 1px solid white;
          height: 270px;
          width: 260px;
          margin-left: 25px;
          float: left;
        "
      >
        <div>专题名称：{{ store.nowdatilthematicInfo[0].thematicName}}</div>
        <div style="outline: 1px solid white; height: 160px" >
          <el-image :src="store.nowthematicInfo[0].thematicImg" fit="contain" style="width: 258px;height: 160px;"></el-image>
        </div>
      </div>
      <div
        style="
          outline: 1px solid white;
          height: 270px;
          width: 850px;
          float: left;
        "
      >
        <div
          style="
            outline: 1px solid white;
            height: 70px;
            overflow: hidden;
          "
        >
          <div style="margin-left: 360px; margin-top: 10px">
            <el-row>
                <el-button @click="classVisiable = true" >绑定课程 </el-button>
                    <el-dialog v-model="classVisiable" title="绑定课程">
                        <el-form :model="form">

                            <el-form-item label="选择课程" :label-width="formLabelWidth">
                                <el-select v-model="form.region" placeholder="请选择课程">
                                <el-option label="Zone No.1" value="shanghai" />
                                <el-option label="Zone No.2" value="beijing" />
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="classVisiable = false">取消</el-button>
                            <el-button type="primary" @click="classVisiable = false">
                            确认
                            </el-button>
                        </span>
                        </template>
                    </el-dialog> 
               
                <el-button @click="testVisiable = true" style="margin-left: 10px;">绑定考试</el-button>
                    <el-dialog v-model="testVisiable" title="绑定考试">
                        <el-form :model="form">
                            <el-form-item label="考试名称" :label-width="formLabelWidth">
                                <el-select v-model="form.region" placeholder="请选择课程">
                                <el-option label="Zone No.1" value="shanghai" />
                                <el-option label="Zone No.2" value="beijing" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="学时要求" :label-width="formLabelWidth">
                                <el-select v-model="form.region" placeholder="请选择课程">
                                <el-option label="Zone No.1" value="shanghai" />
                                <el-option label="Zone No.2" value="beijing" />
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="testVisiable = false">取消</el-button>
                            <el-button type="primary" @click="testVisiable = false">
                            确认
                            </el-button>
                        </span>
                        </template>
                    </el-dialog>
                
                  <el-button @click="updateVisiable = true" style="margin-left: 10px;">修改专题</el-button>
                    <el-dialog v-model="updateVisiable" title="绑定考试">
                        <el-form :model="form">
                          <el-form-item label="专题名称">
                            <el-input v-model="updatethematicname" placeholder="请输入修改的专题名称" clearable>
                            </el-input>
                          </el-form-item>
                          <el-form-item label="专题详情">
                            <el-input v-model="updatethematicdesc" placeholder="请输入修改的专题详情" clearable />
                          </el-form-item>
                          <el-form-item label="专题分类">
                            <el-input v-model="updateCateid" placeholder="请输入修改的专题分类id" clearable />
                          </el-form-item>
                          <!-- <el-form-item label="专题图片">
                            <el-input v-model="updateImg" placeholder="请输入修改的专题图片" clearable />
                          </el-form-item> -->
                        </el-form>
                        <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="updateVisiable = false">取消</el-button>
                            <el-button type="primary" @click="fupdateVisiable">
                            确认
                            </el-button>
                        </span>
                        </template>
                    </el-dialog>
                
                <el-button @click="delVisiable = true" style="margin-left: 10px;">删除专题</el-button>

                    <el-dialog v-model="delVisiable" title="确认提示" >
                        <el-form :model="form" style="margin-left: 80px;">
                            <span style="font-size: 20px;color: rgb(34, 34, 34);margin-bottom: 0;">
                              是否删除此专题
                            </span>
                            <br>
                            <span>
                              删除此专题，将无法恢复！
                            </span>
                        </el-form>
                        <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="delVisiable = false">取消</el-button>
                            <el-button type="primary" @click="fdelVisiable">
                            确认
                            </el-button>
                        </span>
                        </template>
                    </el-dialog>

                <el-button @click="addVisiable = true" style="margin-left: 10px;">上架下架</el-button>
                <el-dialog v-model="addVisiable" title="确认提示" >
                        <el-form :model="form" style="margin-left: 80px;">
                          <template v-if="store.nowthematicInfo[0].isShelves==0">
                            <span style="font-size: 20px;color: rgb(34, 34, 34);margin-bottom: 0;">
                              是否确定上架
                            </span>
                          </template>
                          <template v-else-if="store.nowthematicInfo[0].isShelves==1">
                            <span style="font-size: 20px;color: rgb(34, 34, 34);margin-bottom: 0;">
                              是否确定下架
                            </span>
                          </template>
                            <br>
                        </el-form>
                        <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="addVisiable = false">取消</el-button>
                            <el-button type="primary"  @click="faddVisiable()">
                            确认
                            </el-button>
                        </span>
                        </template>
                    </el-dialog>

            </el-row>
          </div>
        </div>

        <div style="outline: 1px solid white; width: 850px; height: 200px">
          <div>
            <div style="height: 60px">
              <div style="float: left; font-size: 14px">所属类目：</div>
              <el-breadcrumb
                separator="|"
                style="float: left; line-height: 57px; outline: 1px solid white"
              >
                <el-breadcrumb-item>工程咨询</el-breadcrumb-item>
                <el-breadcrumb-item>监理工程师</el-breadcrumb-item>
                <el-breadcrumb-item>第三级类目</el-breadcrumb-item>
              </el-breadcrumb>
              <template v-if="store.nowdatilthematicInfo[0].isShelves == 1">
                <div style="height: 60px;outline: 1px solid white;width: 100px;float: right;">
                  <div style="background-color: rgb(0, 255, 0);height: 10px;width: 10px;border-radius: 50%;margin-top: 25px;float: left;"></div>
                  <div style="font-size: 14px;margin-left: 10px;float: left;margin-top: 2px;">已上架</div>
                </div>
              </template>
              <template v-else-if="store.nowdatilthematicInfo[0].isShelves == 0">
                <div style="height: 60px;outline: 1px solid white;width: 100px;float: right;">
                  <div style="background-color: rgb(255, 149, 0);height: 10px;width: 10px;border-radius: 50%;margin-top: 25px;float: left;"></div>
                  <div style="font-size: 14px;margin-left: 10px;float: left;margin-top: 2px;">待上架</div>
                </div>  
              </template>
            </div>
            
            <div
              style="outline: 1px solid white; height: 120px; line-height: 30px"
            >
              <span style="font-size: 14px">专题描述：</span>
              <span style="font-size: 14px; margin: 0; padding: 0"
                >{{ store.nowdatilthematicInfo[0].thematicDescription}}
                </span
              >
            </div>
          </div>
        </div>

        

      </div>
    </div>

    <div style="height: 350px;background-color: white;width: 1000px;margin: 0 auto ;margin-top: 10px; overflow: hidden;">
      <div style="height: 153px;width: 286px; margin: 50px auto;">
        <img src="@/assets/disfound.png" alt="">
      </div>
      <div style="width: 130px;margin: 0 auto;outline: 1px solid white;color: gray;font-size: 20px;">
        <span >暂无课程/考试</span>
      </div>
    </div>
    <!-- <div class="dash">
        </div>
        <div class="top-content">
            <div class="top-content-left">
                <h4>专题名称：JAVA开发栏目</h4>
                <div class="top-content-left-img">

                </div>
            </div>
            <div class="top-content-right">
                <div class="right-top">

                </div>
                <div></div>
                <div></div>
            </div>
        </div>  -->
  </div>
</template>

<style scoped>
.top {
  border: 1px solid white;
  height: 40px;
  width: 100%;
}
.dash {
  height: 10px;
  width: 100%;
  background-color: gray;
}
.top-content {
  margin-left: 40px;
  height: 200px;
}
.top-content-left {
  float: left;
  border: 1px solid white;
  width: 220px;
  height: 200px;
  text-align: center;
}
.top-content-right {
  float: left;
  border: 1px solid white;
  width: 800px;
  height: 200px;
}
.right-top {
  border: 1px solid white;
  height: 60px;
  width: 450px;
  margin-left: 350px;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>